<template>
  <div class="dashboard">
    <h1>图书馆数据可视化</h1>

    <div class="summary-cards">
      <div class="card">
        <h2>{{ totalBooks }}</h2>
        <p>总图书数量</p>
      </div>
      <div class="card">
        <h2>{{ availableBooks }}</h2>
        <p>可借阅图书</p>
      </div>
      <div class="card">
        <h2>{{ borrowedBooks }}</h2>
        <p>已借出图书</p>
      </div>
    </div>

    <div class="charts">
      <div class="chart books-by-category">
        <h3>图书分类统计</h3>
        <BarChart :data="booksByCategory" />
      </div>

      <div class="chart borrow-trend">
        <h3>借阅趋势</h3>
        <LineChart :data="borrowTrend" />
      </div>
    </div>

    <div class="recent-borrows">
      <h2>最近借阅记录</h2>
      <table>
        <thead>
          <tr>
            <th>书名</th>
            <th>借阅人</th>
            <th>借阅日期</th>
            <th>归还状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(borrow, index) in recentBorrows" :key="index">
            <td>{{ borrow.title }}</td>
            <td>{{ borrow.borrower }}</td>
            <td>{{ borrow.borrowDate }}</td>
            <td :class="{ 'returned': borrow.returned }">
              {{ borrow.returned ? '已归还' : '未归还' }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BarChart from '@/components/chart/BarChart.vue';
import LineChart from '@/components/chart/LineChart.vue';

// 图书总数
const totalBooks = ref(385);

// 可借阅图书数量
const availableBooks = ref(240);

// 已借出图书数量
const borrowedBooks = ref(145);

// 按分类统计的图书数据
const booksByCategory = ref({
  labels: ['小说', '科技', '历史', '教育', '艺术'],
  datasets: [{
    label: '图书数量',
    data: [120, 85, 60, 70, 50],
    backgroundColor: '#4CAF50'
  }]
});

// 借阅趋势数据（过去7天）
const borrowTrend = ref({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  datasets: [{
    label: '每日借阅量',
    data: [25, 32, 18, 36, 45, 50, 30],
    borderColor: '#2196F3',
    fill: false
  }]
});

// 最近借阅记录
const recentBorrows = ref([
  { title: '百年孤独', borrower: '张三', borrowDate: '2023-06-15', returned: true },
  { title: '人类简史', borrower: '李四', borrowDate: '2023-06-16', returned: false },
  { title: '时间简史', borrower: '王五', borrowDate: '2023-06-17', returned: true },
  { title: '三国演义', borrower: '赵六', borrowDate: '2023-06-18', returned: false },
  { title: '机器学习基础', borrower: '钱七', borrowDate: '2023-06-19', returned: true }
]);
</script>

<style scoped>
.dashboard {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.summary-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.card {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  width: 30%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.charts {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.chart {
  width: 48%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recent-borrows {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

td.returned {
  color: green;
}

td:not(.returned) {
  color: orange;
}
</style>